import React from 'react';
import { Row, Col, Button,} from 'antd';
import {withRouter} from 'react-router-dom'
import * as L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-side-by-side'
// import 'leaflet-imageoverlay-rotated'
// // import './css/leaflet.draw.css'
// // import './js/leaflet.draw'
// import 'leaflet.measurecontrol'
// import 'leaflet-measure/dist/leaflet-measure.css'
// import 'leaflet-measure/dist/leaflet-measure.cn'
// import 'leaflet-measure'
import GeowayMap from '@/components/map/js/geowayMap'
// import config from '@/components/map/js/config'
import "./index.less";
let mymap=null
console.log(mymap)
class map extends React.Component {
    constructor(props) {
        super(props);
        this.myMap=null
        this.state ={
            myMap:null
        }
    }
    componentWillMount(){
        if (this.state.myMap){
            this.state.myMap.removeDrawLayer()
            this.setState({
                myMap:null
            })
        }

    }
    componentDidMount(){
        this.props.onRef('Map', this)

        mymap = new GeowayMap()
        // 地图初始方法
        mymap.initMap('map', {
            mapInfo: {
                crs: L.CRS.EPSG4326,
                center: [39.9, 116.3],
                level: 4,
                minlevel: 4,
                maxlevel: 14
            }
        })
        this.setState({
            myMap:mymap
        })
    }
    zoomIn(){
        this.state.myMap.zoomIn()
    }
    zoomOut(){
        this.state.myMap.zoomOut()
    }
    setFullScreen(){
        this.state.myMap.fullMap()
    }
    clearAll(){
        this.state.myMap.removeDrawLayer();
    }
    addMapLayer = (layerInfo) => {
        this.state.myMap.addMapLayer(layerInfo);
    }
    getMap=()=>{
        this.state.myMap.getMap()
    }
    removeLayer=()=>{
        this.state.myMap.removeLayer()
    }
    fullMap=()=>{
        this.state.myMap.fullMap()
    }
    render() {
        return (
            <div id="map" style={{width:'100%',height:'calc(100vh - 150px)'}}>
                <div className="mapTools">
                    <Row>
                        <Button title={"清除"} className="btn" icon="delete" onClick={(e) => this.clearAll(e)}>清除</Button>
                        <Button title={"全图"} className="btn" icon="fullscreen" onClick={(e) => this.setFullScreen(e)}>全图</Button>
                        <Button title={"缩小"} className="btn"  icon="zoom-out" onClick={(e) => this.zoomOut(e)}>缩小</Button>
                        <Button title={"放大"} className="btn" icon="zoom-in" onClick={(e) => this.zoomIn(e)} >放大</Button>
                    </Row>
                    <Row>
                        {/*<div className="maptoos_s">*/}
                        {/*    <div className="mapContainer">*/}
                        {/*        <div className="tool">*/}
                        {/*            */}
                        {/*        </div>*/}
                        {/*    </div>*/}
                        {/*</div>*/}
                    </Row>
                </div>
            </div>
        );
    }
}

export default withRouter(map);
